<template>
  <div>
    <a-form :layout="formLayout" :form="form">
      <a-form-item
        label="Form Layout"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
      >
        <a-radio-group
          default-value="horizontal"
          @change="handleFormLayoutChange"
        >
          <a-radio-button value="horizontal">
            Horizontal
          </a-radio-button>
          <a-radio-button value="vertical">
            Vertical
          </a-radio-button>
          <a-radio-button value="inline">
            Inline
          </a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="姓名"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        :validate-status="userNameError() ? 'error' : 'success'"
        :help="userNameError() || ''"
        has-feedback
      >
        <a-input
          placeholder="请输入姓名"
          v-decorator="[
            'name',
            {
              initialValue: name,
              rules: [
                { required: true, min: 4, message: '必须大于3个字符' },
                {
                  pattern: /^w/,
                  message: '必须w开头'
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item
        label="地址"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        has-feedback
      >
        <a-input
          placeholder="请输入地址"
          v-decorator="[
            'address',
            {
              initialValue: address,
              rules: [
                {
                  required: true,
                  min: 4,
                  message: '必须大于3个字符'
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
        <a-button @click="handleSubmit" html-type="button" type="primary">
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
// function hasErrors(fieldsError) {
//   return Object.keys(fieldsError).some(field => fieldsError[field]);
// }
export default {
  name: "BasicForm",
  data() {
    // 创建form
    this.form = this.$form.createForm(this, { name: "dynamic_rule" });
    return {
      formLayout: "horizontal",
      name: "",
      address: ""
    };
  },
  mounted() {
    // 在dom结构解析完毕时
    this.$nextTick(() => {
      // 要改变字段的值，必须使用setFieldsValue来动态修改才能生效
      this.form.setFieldsValue({ name: "hello world" });
      // 初始化时校验某一字段
      this.form.validateFields(["name"]);
    });
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 }
          }
        : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 }
          }
        : {};
    }
  },
  methods: {
    handleFormLayoutChange(e) {
      this.formLayout = e.target.value;
    },
    // Only show error after a field is touched.
    userNameError() {
      const { getFieldError } = this.form;
      return getFieldError("name");
    },
    handleSubmit() {
      let _this = this;
      // 校验form每一个字段，回调返回错误信息和每一项的值，没有错误信息表示校验通过
      this.form.validateFields(function(error, values) {
        if (!error) {
          // 使用 es6 新API直接在源对象上一次性赋值
          Object.assign(_this, values);
          console.log(_this);
        } else {
          console.log(error);
        }
      });
    }
  }
};
</script>
